<template>
  <el-dialog v-model="visible" title="请假申请">
    <el-form
      ref="ruleFormRef"
      :rules="rules"
      :model="noteForm"
      label-width="auto"
      status-icon
    >
      <el-form-item label="时间" prop="date">
        <el-config-provider :locale="local">
          <el-date-picker
            v-model="noteForm.date"
            type="datetimerange"
            start-placeholder="离校时间"
            end-placeholder="返校时间"
            format="YYYY/MM/DD HH:mm"
            value-format="YYYY-MM-DD HH:mm:ss"
            :default-time="defaultTime"
          />
        </el-config-provider>
      </el-form-item>
      <el-form-item label="地点" prop="travel">
        <el-input v-model="noteForm.travel" />
      </el-form-item>
      <el-form-item label="原因" prop="reason">
        <el-input v-model="noteForm.reason" />
      </el-form-item>
      <el-form-item>
        <el-button @click="handleCancel(ruleFormRef)">取消</el-button>
        <el-button type="primary" @click="handleConfirm(ruleFormRef)">
          确认
        </el-button>
      </el-form-item>
    </el-form>
  </el-dialog>
</template>

<script setup lang="ts">
import { ref, reactive } from 'vue'
import zhcn from 'element-plus/lib/locale/lang/zh-cn'
import { addNote } from '@/api/modules/note'
import type { FormInstance, FormRules } from 'element-plus'

// 设置日期语言为中文
const local = zhcn

// ------------------------------ 父子通信 ------------------------------
// 对话框表格显示
const visible = ref(false)
const handleDialogVisible = () => {
  visible.value = true
}
defineExpose({ handleDialogVisible })

// ------------------------------ 日期 ------------------------------
// 日期选择器默认时间，中午12:00
const defaultTime = new Date(2000, 1, 1, 12, 0, 0)
// 用户选择的时间（数组），下表0为开始时间，下表1为结束时间
const time = ref<[string, string]>(['', ''])

// ------------------------------ 表单 ------------------------------
// 表单实例
const ruleFormRef = ref<FormInstance>()
// 校验规则
const rules = reactive<FormRules>({
  date: {
    type: 'array',
    required: true,
    len: 2,
    message: '请选择日期',
    fields: {
      0: { type: 'string', required: true, message: '请选择日期' },
      1: { type: 'string', required: true, message: '请选择返校时间' },
    },

    trigger: 'blur',
  },
  travel: { required: true, message: '请填写地点' },
  reason: { required: true, message: '请填写原因' },
})
interface INoteForm {
  date?: [string, string]
  leaveTime: string
  backTime: string
  travel: string
  reason: string
}
const noteForm = reactive<INoteForm>({
  date: time.value,
  leaveTime: '',
  backTime: '',
  travel: '',
  reason: '',
})

// ------------------------------ 对话框 ------------------------------
// 对话框确定
const handleConfirm = async (formRef: FormInstance | undefined) => {
  if (!formRef) return
  await formRef.validate((valid, fields) => {
    if (valid) {
      noteForm.leaveTime = noteForm.date![0]
      noteForm.backTime = noteForm.date![1]
      delete noteForm['date']
      addNote(noteForm)
        .then((response) => {
          console.log(response)
        })
        .catch((error) => {
          console.log(error)
        })
      formRef.resetFields()
      visible.value = false
    } else {
      console.log('校验未通过', fields)
    }
  })
}
const handleCancel = (formRef: FormInstance | undefined) => {
  if (!formRef) return
  formRef.resetFields()
  visible.value = false
}

// TODO 申请确认后再次发起当前页分页请求
</script>

<style scoped></style>
